<template>
  <div class="TextlibraryContent" :style="{
    'padding': props.isComponents ? 0 : '14px'
  }">
    <div class="smart-clip-header" v-if="!props.isComponents">
      <div class="smart-clip-header-title_top">文案库</div>
      <div class="smart-clip-header-desc">
        通过手动添加、链接提取、视频提取、AI创作等生成的文案,
        可以直接用于一键成片、视频混剪文案
      </div>
    </div>



    <div class="content" :style="{
      'margin-top': props.isComponents ? 0 : '20px'

    }">
      <div class="list-left">
        <div class="left-head">
          <span class="lib-name">我的文案库</span>
          <div class="left-btn" @click="newaddku()" v-if="!props.isComponents">
            <plus-outlined />
            <span> 添加文案库</span>
          </div>
        </div>
        <div class="left-list">
          <div class="left_list_top"></div>
          <a-spin v-if="inspirationList.length > 0" :spinning="lLoading">
            <div class="list-item" v-for="(item, index) in inspirationList" :key="index"
              :class="currentCateId == item.id ? 'active-item' : ''" @click="cateChange(item.id)">
              <a-tooltip placement="top">
                <template #title>
                  <span>{{ item.folder_name }}</span>
                </template>
                <div class="item-name">{{ item.folder_name }}</div>
              </a-tooltip>
              <div class="item-btn-area" @click.stop="() => { }" v-if="!props.isComponents">
                <a-popover placement="right">
                  <template #content>
                    <div>
                      <a-button type="link" @click="newaddku(item)">编辑</a-button>
                    </div>
                    <div>
                      <a-button type="link" @click="delCate(item.id)">删除</a-button>
                    </div>
                  </template>
                  <more-outlined />
                </a-popover>
              </div>
            </div>
          </a-spin>
          <div class="empty" v-else>
            <a-empty></a-empty>
          </div>
        </div>
      </div>

      <div class="right-table">
        <!--  :style="{ marginTop: isComponents ? '' : '40px' }" -->
        <div class="caozuo_btn">
          <div class="btn_left" :style="{
            'justify-content': !props.isComponents ? 'start' : 'space-between',
          }">

            <div class="search-title">
              <!-- <a-space :size="20"> -->
              <a-select v-model:value="searchParams.source" placeholder="来源" style="width: 180px" allowClear
                option-label-prop="children" @change="getImportTable(false)">
                <a-select-option v-for="item in platformOptions" :value="item?.value">
                  {{ item?.label }}
                </a-select-option>
              </a-select>

              <a-range-picker format="YYYY-MM-DD" valueFormat="YYYY-MM-DD" v-model:value="searchParams.dateTime"
                @change="timeChange" />

              <a-input v-model:value="searchParams.title" placeholder="标题" style="width: 180px" allowClear="true"
                @change="(e) => e.type == 'click' && getImportTable()">
              </a-input>
              <a-button class="btn_left_item" type="primary" @click="searchTable">
                <SearchOutlined />查询
              </a-button>
              <!-- </a-space> -->
            </div>
          </div>
          <div class="btn_right" v-if="!props.isComponents">
            <div class="btn_left_left" v-if="!props.isComponents">
              <a-button class="btn_left_item" v-if="!props.isComponents" @click="shauxin">
                <template #icon><redo-outlined /></template>
                刷新</a-button>
            </div>
            <a-button class="btn_left_item" type="primary" @click="addExcel">批量导入</a-button>
            <a-button class="btn_left_item" type="primary" @click="add_Text">添加文案</a-button>
            <a-button class="btn_left_item" type="primary" ghost
              @click="batchTextOperation('mixedCutCreat')">批量剪辑</a-button>
            <a-button class="btn_left_item" type="primary" ghost v-permissionOneClickClip
              @click="batchTextOperation('OneClickClip')">批量成片</a-button>
            <a-popconfirm title="确定要删除勾选的文案吗?" ok-text="确定" cancel-text="取消" @confirm="all_del">
              <a-button class="btn_left_item" type="primary" ghost>批量删除</a-button>
            </a-popconfirm>
          </div>
          <div class="btn_right" v-else>
            <!--  -->
            <a-button class="btn_left_item" type="primary" ghost @click="handleImport">导入所选文案</a-button>
          </div>
        </div>
        <a-table 
        style="margin-top: 20px" :pagination="pagination" :columns="columns" :data-source="materialList"
          :loading="serchLoding" @change="handleTableChange" :row-selection="{
            selectedRowKeys: selectedRowKeys,
            onChange: onSelectChange,
            type: props.selectType,
          }" :scroll="{ x: props.isComponents ? 415 : 1600, y: props.tableHeight }" rowKey="id">
          <template #headerCell="{ title, column }">
            <template v-if="column.key == 'title'">
              <div style="text-align: center">{{ title }}</div>
            </template>
            <template v-if="column.key == 'sub_title'">
              <div style="text-align: center">{{ title }}</div>
            </template>
            <template v-if="column.key == 'material_content'">
              <div style="text-align: center">{{ title }}</div>
            </template>
          </template>
          <template #bodyCell="{ column, record }">
            <template v-if="column.dataIndex === 'title'">
              <div class="material-content" @click="viewText(record?.title)">
                {{ record.title || "--" }}
              </div>
            </template>
            <template v-if="column.dataIndex === 'material_content'">
              <div class="material-content" @click="viewText(record?.material_content)">
                {{ record.material_content || "--" }}
              </div>
            </template>
            <template v-if="column.dataIndex === 'edit'">
              <template v-if="props.isComponents">
                <a-button type="link" @click="imoortText(record)">导入文案</a-button>
              </template>
              <template v-else>
                <a-button type="link" @click="imitativeWriting(record)">一键仿写</a-button>
                <a-button type="link" @click="todetail(record)">编辑</a-button>
                <a-popconfirm title="确定要删除此项吗?" ok-text="确定" cancel-text="取消" @confirm="deleteClick(record)">
                  <a-button type="link">删除</a-button>
                </a-popconfirm>
              </template>
            </template>
          </template>
        </a-table>

        <!-- <div class="pagintaion">
          <a-pagination v-model:current="current" :total="500" />
        </div> -->
      </div>
    </div>
  </div>

  <addCopywriting :visible="copy_visivle" :AIText="AIText" :currentCateId="currentCateId" :extraID="extraID"
    :source_Add="source_Add" :editID="editID" @cancel="addCopycancel" @openAIcreate="openAIcreate" @openExtr="openExtr"
    @successSub="successSub"></addCopywriting>

  <addAiCreate ref="AiCreateScriptRef" @saveText="saveText"></addAiCreate>

  <videoextraction :visible="video_visivle" @cancel="videocancel" @success_Sub="success_Sub"></videoextraction>

  <!-- 添加文案库 -->
  <a-modal v-model:visible="newadd_visible" :title="newadd_Text" @ok="handleOk">
    <a-form ref="formRef" :model="formState" name="basic" autocomplete="off" @finish="onFinish"
      @finishFailed="onFinishFailed">
      <a-form-item label="名称" name="username" :rules="[{ required: true, message: '请输入文案库名称!' }]">
        <a-input placeholder="请输入文案库名称" v-model:value="formState.username" :maxlength="18" showCount />
      </a-form-item>
    </a-form>
  </a-modal>
  <a-modal v-model:visible="viewTextvisible" title="文案预览" @cancel="viewTextvisible = false" zIndex="9999">
    <div class="view_text" style="max-height: 400px; overflow-y: auto">
      {{ textUrl }}
    </div>
    <template #footer>
      <a-button key="back" @click="viewTextvisible = false">取消</a-button>
      <a-button key="submit" type="primary" @click="copyText(textUrl)">复制全部</a-button>
    </template>
  </a-modal>

  <!-- excel 导入文案 弹窗 -->
  <ExcelImportModel ref="ExcelImportModelRef"></ExcelImportModel>
</template>

<script setup>
import {
  ref,
  computed,
  onMounted,
  watch,
  createVNode,
  inject,
  reactive,
} from "vue";
import request from "@/common/utils/request";
import { useRoute, useRouter } from "vue-router";

import moment from "moment";
import {
  SearchOutlined,
  RedoOutlined,
  MoreOutlined,
  ExclamationCircleOutlined,
  PlusOutlined,
  EyeOutlined,
  EllipsisOutlined,
} from "@ant-design/icons-vue";
import addCopywriting from "@/views/shotstack/AiCreation/components/addCopywriting.vue";
import addAiCreate from "@/views/shotstack/AiCreation/components/addAiCreate.vue";
import videoextraction from "@/views/shotstack/AiCreation/components/videoextraction.vue";
import store from "@/store";
import { debounce } from "lodash";

// excel 导入文案 弹窗
import ExcelImportModel from './components/ExcelImportModel.vue'
const ExcelImportModelRef = ref()

import { Modal, message } from "ant-design-vue";
import utils from "@/common/utils/utils.js";
const emit = defineEmits(["importSuccess:list"]);
const props = defineProps({
  // 是否作为组件的形式呈现
  isComponents: {
    type: Boolean,
    default: false,
  },
  // 勾选的模式, 默认多选
  selectType: {
    type: Text,
    default: "checkbox",
    // default: "checkbox",
  },
  tableHeight: {
    type: Number,
    default: 480,
  },
});

const route = useRoute();
const router = useRouter();

const currentCateId = ref("");
// 左侧文案项目列表
const inspirationList = ref([]);
const lLoading = ref(false);

const columns = ref([
  {
    title: "文案标题",
    dataIndex: "title",
    key: "title",
    width: 200,
  },
  {
    title: "文案副标题",
    dataIndex: "sub_title",
    key: "sub_title",
    width: 200,
  },
  {
    title: "文案内容",
    dataIndex: "material_content",
    key: "material_content",
    width: 450,
  },
  {
    title: "来源",
    dataIndex: "source_text",
    key: "source_text",
    align: "center",
    width: 100,
  },
  {
    title: "创建时间",
    dataIndex: "updated_at",
    key: "updated_at",
    width: "200",
    align: "center",
  },
  {
    title: "操作",
    dataIndex: "edit",
    key: "edit",
    align: "center",
    width: 249,
    fixed: "right",
  },
]);

onMounted(() => {
  // 作为组件使用, 不能编辑
  if (props.isComponents) {
    // const index = columns.value.findIndex((ele) => ele.dataIndex == "edit");
    columns.value = [
      {
        title: "文案内容",
        dataIndex: "material_content",
        key: "material_content",
        width: 240,
      },
      {
        title: "操作",
        dataIndex: "edit",
        key: "edit",
        width: 100,
        align: "center",

      },
    ];
  }
});

// 获得文案库仙项目列表
const getLibraryList = (showMsg = false) => {
  request.get("/work_ai", "/user/shotstack/folder/write/list").then((res) => {
    inspirationList.value = res.result.data;
    currentCateId.value = res.result.data[0].id;
    getImportTable(showMsg);
  });
};

const cateChange = (id) => {
  currentCateId.value = id;
  getImportTable();
};

const showEdit = (item) => {
  eidtCateId.value = item?.id ?? "";
  editName.value = item?.name ?? "";
  addVisible.value = true;
};

const delCate = (id) => {
  Modal.confirm({
    title: () => `确定要删除吗？`,
    icon: () => createVNode(ExclamationCircleOutlined),
    centered: true,
    okText: "确定",
    cancelText: "取消",
    onOk() {
      request
        .del("/work_ai", "/user/shotstack/folder/write/delete", {
          ids: [id],
          // id,
        })
        .then((res) => {
          if (res?.code && res.code != 1000)
            return message.error(res?.msg || "删除失败!");
          message.success("删除成功");
          getLibraryList();
        });
    },
  });
};

// 一键仿写
const imitativeWriting = (record) => {
  router.push({
    name: 'TextImitation',
    query: {
      writingId: record.id,
    },
  });
}

const copy_visivle = ref(false);

const materialList = ref([
  {
    material_url: "1",
  },
]);
const serchLoding = ref(false);
const selectedRowKeys = ref([]);
// table 勾选函数
const onSelectChange = (item) => {
  selectedRowKeys.value = item;
};

const editID = ref("");
const todetail = (item) => {
  console.log(item, "取id");
  editID.value = item.id;
  copy_visivle.value = true;
};
const deleteClick = (item) => {
  let params = {
    ids: [item.id],
  };
  request
    .del("/work_ai", "/user/shotstack/write/delete", params)
    .then((res) => {
      message.success("删除成功");
      getImportTable();
    });
};

const add_Text = () => {
  copy_visivle.value = true;
};

const addCopycancel = () => {
  editID.value = "";
  copy_visivle.value = false;
};
const AiCreateScriptRef = ref(null);

const openAIcreate = () => {
  AiCreateScriptRef.value.drawerControl.open();
};

const video_visivle = ref(false);

// 打开视频提取文字
const openExtr = () => {
  video_visivle.value = true;
};

const videocancel = () => {
  video_visivle.value = false;
};

const extraID = ref("");
const source_Add = ref("");
const success_Sub = (data) => {
  extraID.value = data.id;
  source_Add.value = data.source;
  video_visivle.value = false;
};

const AIText = ref("");

const saveText = (list) => {
  AIText.value = list;
};

const newadd_visible = ref(false);

const newadd_Text = ref("添加文案库");

const pudate_id = ref("");

const newaddku = (info) => {
  if (!info) {
    newadd_Text.value = "添加文案库";
    newadd_visible.value = true;
  } else {
    newadd_Text.value = "编辑文案库";
    newadd_visible.value = true;
    formState.value.username = info.folder_name;

    pudate_id.value = info.id;
  }
};

const sub_newadd = () => { };

const formRef = ref();
const handleOk = debounce(() => {
  formRef.value
    .validate()
    .then(() => {
      // 表单验证通过后的逻辑
      onFinish();
    })
    .catch((error) => {
      console.log("验证失败", error);
    });
}, 500); // 设置延迟时间，例如500毫秒

const onFinish = () => {
  if (newadd_Text.value == "添加文案库") {
    request
      .post("/work_ai", "/user/shotstack/folder/write/add", {
        folder_name: formState._rawValue.username,
      })
      .then((res) => {
        formState._rawValue.username = "";
        newadd_visible.value = false;
        message.success("添加成功");
        getLibraryList();
      });
  } else {
    request
      .put("/work_ai", "/user/shotstack/folder/write/update", {
        folder_name: formState._rawValue.username,
        id: pudate_id.value,
      })
      .then((res) => {
        formState._rawValue.username = "";
        newadd_visible.value = false;
        message.success("编辑成功");
        getLibraryList();
      });
  }
};
// 添加文案库项目弹窗表单
const formState = ref({
  username: "",
});

const total = ref(0);
const page = ref(1);
const pageSize = ref(10);

const pagination = computed(() => ({
  total: total.value,
  current: page.value,
  pageSize: pageSize.value,
  showSizeChanger: true,
  showTotal: (total) => `共 ${total} 条`,
}));

const searchTable = debounce(() => {
  page.value = 1;
  getImportTable();
}, 500); // 设置延迟时间，例如500毫秒

// 搜索条件
const searchParams = ref({
  source: null,
  nickname: null,
  dateTime: [],
  start_time: "",
  end_time: "",
  title: null,
});

// 时间搜索条件改变
const timeChange = (date, dateString) => {
  console.log(date + "date", dateString + "dateString");
  if (Array.isArray(dateString) && dateString.length) {
    searchParams.value.dateTime = dateString;
    searchParams.value.start_time = dateString[0];
    searchParams.value.end_time = dateString[1];
  } else {
    searchParams.value.dateTime = [];
    searchParams.value.start_time = "";
    searchParams.value.end_time = "";
  }
  getImportTable();
};

// table 页码改变
const handleTableChange = (pag, filters, sorter) => {
  page.value = pag.current;
  pageSize.value = pag.pageSize;
  getImportTable();
};

// 获取列表数据
const getImportTable = (showMsg = false) => {
  let params = {
    start_time: searchParams.value.start_time,
    end_time: searchParams.value.end_time,
    title: searchParams.value.title,
    source: searchParams.value.source,
    merchant_folder_statck_id: currentCateId.value,
    pageSize: pageSize.value,
    page: page.value,
  };
  request.get("/work_ai", "/user/shotstack/write/list", params).then((res) => {
    console.log(res,'shuju');
    
    materialList.value = res.result.data;
    total.value = res.result.total;
    console.log(total.value,'total.value');
    
    showMsg && message.success("刷新成功");
  });
};

const initData = () => {
  getLibraryList();
};
const platformOptions = ref([]);
const getsourceList = () => {
  request.get("/work_ai", "/user/shotstack/write/source").then((res) => {
    platformOptions.value = res.result;
  });
};

// 添加文案成功
const successSub = () => {
  copy_visivle.value = false;
  getImportTable();
};
const all_del = () => {
  if (selectedRowKeys.value.length == 0) {
    message.error("请先选择文案!");
    return;
  }
  let params = {
    ids: selectedRowKeys.value,
  };
  request
    .del("/work_ai", "/user/shotstack/write/delete", params)
    .then((res) => {
      message.success("删除成功");
      getImportTable();
    });
};

// 刷新
const shauxin = () => {
  Object.assign(searchParams.value, {
    source: null,
    nickname: null,
    dateTime: [],
    start_time: "",
    end_time: "",
    title: null,
  });
  page.value = 1;
  pageSize.value = 10;
  total.value = 0;
  getLibraryList(true);
};

const batchTextOperation = (type) => {
  if (!selectedRowKeys.value.length) {
    return message.warning("请选择要剪辑的文章");
  }
  const filteredLists = materialList.value.filter((article) =>
    selectedRowKeys.value.includes(article.id)
  );

  if (type == "OneClickClip" && selectedRowKeys.value.length > 5) {
    return message.warning("导入成片最多5条");
  }

  const sceneCreationTexts = filteredLists?.map(
    (text) => text.material_content
  );
  const sceneCreationTitles = filteredLists?.map((text) => text.title);
  const subtitles = filteredLists?.map((text) => text.sub_title);

  // 存放即将导入到混剪的文案数据
  store.commit("SET_SCENE_CREATION_TEXTS", sceneCreationTexts);
  store.commit("SET_SCENE_CREATION_TITLES", sceneCreationTitles);
  store.commit("SET_SCENE_CREATION_SUBTITLES", subtitles);
  const routeConfig = {
    OneClickClip: {
      name: "OneClickClip",
      query: { sceneCreation: "sceneCreation" },
    },
    mixedCutCreat: {
      name: "mixedCutCreat",
      query: { type: 0, viewType: 2, Textlibrary: "Textlibrary" },
    },
  };

  router.push(routeConfig[type]);
};
let viewTextvisible = ref(false);
let textUrl = ref("");
const viewText = (text) => {
  viewTextvisible.value = true;
  textUrl.value = text;
};
const copyText = (url) => {
  utils.copyText(url);
  viewTextvisible.value = false;
};
// 作为组件形式导出文案
const handleImport = () => {
  if (!selectedRowKeys.value.length) {
    return message.warning("请选择要剪辑的文章");
  }
  const filteredLists = materialList.value
    .filter((article) => selectedRowKeys.value.includes(article.id))
    .map((ele) => ele);
  console.log(
    filteredLists,
    "filteredListsfilteredListsfilteredListsfilteredLists"
  );

  emit("importSuccess", filteredLists);
  selectedRowKeys.value = [];
};

// 作为组件形式, 导出某条文案
const imoortText = (item) => {
  emit("importSuccess", [item]);
};

const claerSelect = () => {
  selectedRowKeys.value = [];
};

// excel导入文案
const addExcel = () => {
  console.log(inspirationList.value, currentCateId, '文案库列表??');
  const textLibraryList = inspirationList.value.map(ele => {
    return {
      label: ele.folder_name,
      value:ele.id
    }
  })
  console.log(textLibraryList,'textLibraryList');
  
  
  ExcelImportModelRef.value?.open(
    { textLibraryList, textLibraryId: currentCateId.value }
  )
}

getsourceList();
initData();
defineExpose({
  claerSelect,
});
</script>

<style lang="less" scoped>
.TextlibraryContent {
  padding: 14px;
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;



  .content {
    flex: 1;
    display: flex;
    // height: calc(100% - 100px);
    width: 100%;
    margin-top: 20px;
    gap: 20px;
    overflow: hidden;

    .list-left {
      height: 100%;
      background-color: #fff;
      // width: 300px;
      padding: 20px;
      // box-sizing: border-box;
      display: flex;
      flex-direction: column;
      justify-content: space-between;

      .left-list {
        margin-top: 20px;
        width: 200px;
        flex: 1;
        overflow-y: auto;

        // background-color: #fff;
        // height: calc(100% - 230px);
        &::-webkit-scrollbar {
          width: 8px;
          /* 滚动条的宽度 */
          height: 10px;
          /* 滚动条的高度，垂直滚动条可能用得上 */
        }

        &::-webkit-scrollbar-thumb {
          background: #eeeeee;
          /* 滑块的背景颜色 */
          border-radius: 10px;
          /* 滑块的圆角 */
        }

        .list-item {
          // width: 100%;
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 0 10px;
          height: 40px;
          border-radius: 5px;
          cursor: pointer;
          margin-top: 5px;

          .item-name {
            flex: 1;
            overflow: hidden;
            /* 隐藏溢出文本 */
            text-overflow: ellipsis;
            /* 显示省略号 */
            width: auto;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
          }

          &:hover {
            background-color: #f4f4f5;
          }

          &:hover>.item-btn-area {
            opacity: 1;
          }
        }

        .active-item {
          background-color: #f2f4fc !important;
        }
      }

      .item-btn-area {
        opacity: 0;
      }

      .empty {
        width: 100%;
        height: 100%;
        display: flex;
        margin-top: 20px;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        opacity: 0.4;
      }

      .lib-name {
        font-weight: 600;
        font-size: 15px;
      }
    }

    .right-table {
      flex: 1;
      background-color: #fff;
      overflow-y: auto;

      .caozuo_btn {
        margin: 20px 0;
        padding: 0 10px;
        width: 100%;
        display: flex;
        justify-content: space-between;

        .btn_left {
          display: flex;
          // justify-content: space-between;
          gap: 130px;

          .btn_left_left {
            display: flex;
          }

          .btn_left_item {
            margin-right: 10px;
            border-radius: 3px;
          }

          .search-title {
            display: flex;
            gap: 10px;
          }
        }

        .btn_right {
          display: flex;
          gap: 10px;
        }
      }

      &::-webkit-scrollbar {
        width: 8px;
        /* 滚动条的宽度 */
        height: 10px;
        /* 滚动条的高度，垂直滚动条可能用得上 */
        display: none;
      }

      &::-webkit-scrollbar-thumb {
        background: #eeeeee;
        /* 滑块的背景颜色 */
        border-radius: 10px;
        /* 滑块的圆角 */
      }

      :deep(.ss-table-body) {
        margin-right: 5px;

        &::-webkit-scrollbar {
          width: 8px;
          /* 滚动条的宽度 */
          height: 10px;
          /* 滚动条的高度，垂直滚动条可能用得上 */
        }

        &::-webkit-scrollbar-thumb {
          background: #eeeeee;
          /* 滑块的背景颜色 */
          border-radius: 10px;
          /* 滑块的圆角 */
        }
      }
    }
  }
}

// 头部
.smart-clip-header {
  padding: 30px;
  border-radius: 12px;
  // height: 180px;
  min-width: 1140px;
  // margin-top: 20px;
  background: linear-gradient(220deg, #f3f7ff, rgba(159, 191, 255, 0.4));
  display: flex;
  flex-direction: column;

  .smart-clip-header-title_top {
    font-size: 24px;
    color: #0c0d0e;
    line-height: 1.5;
  }

  .smart-clip-header-desc {
    font-size: 14px;
    color: #737a87;
    margin-top: 5px;
    line-height: 1.5;
  }

  .smart-clip-header-btngroup {
    margin-top: 15px;
  }
}

:deep(.ss-table-wrapper) {
  margin-top: 0px !important;
}

:deep(.ss-table) {
  margin-top: 0px !important;
}

.lib-name {
  font-weight: 600;
  font-size: 15px;
}

.left-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 5px;
  padding: 0 10px;
}

.left-btn {
  display: flex;
  align-items: center;
  cursor: pointer;
  color: var(--ss-primary-color);
}

.material-content {
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  width: auto;
}

:deep(.ss-table-pagination.ss-pagination) {
  margin: 10px 16px 5px 0 !important;
  padding-bottom: 10px;
  padding-right: 10px;
  // display: inline-block;
  background-color: #fff;
  width: 100%;
  display: flex;
}
</style>
